import { useEffect } from "react";
import { Avatar, Card, List } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";
import AddMemberModal from "../../_modals/platforms/add.member";

import { FindAllMembers, UpdateMember, DeleteMember } from "../../_graphql/platforms";

const PlatformMembers = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { baseInfo } = useModel("person.info");

    const state = useReactive({
        loading: false,
        members: [],
    });

    const loadMembers = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: FindAllMembers, variables: {} });
        state.members = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        loadMembers();
    }, []);

    const passedMember = async (memberUuid) => {
        let res = await graphqlFetchPlatform({ query: UpdateMember, variables: { pmUuid: memberUuid, pmAust: true } });
        res && (await loadMembers());
    };

    const destroyMember = async (memberUuid) => {
        let res = await graphqlFetchPlatform({ query: DeleteMember, variables: { pmUuid: memberUuid } });
        res && (await loadMembers());
    };

    const addMember = async () => {
        setModalTitle("添加管理员");
        setModalVisible(true);
        setModalWidth(500);
        setModalComponent(<AddMemberModal reloadData={loadMembers} members={state.members} />);
    };

    // 窗口头部：30，应用头：60，操作区内边距：24，卡面头：53，修正值：4
    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>管理成员信息</span>}
                headerExtraContent={
                    <ButtonGroup>
                        <Button icon={<IconPlusCircle />} onClick={addMember}>
                            添加成员
                        </Button>
                        <Button icon={<IconRefresh />} onClick={loadMembers}>
                            重新加载
                        </Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 20, height: cardBodyHeight - 40, overflow: "auto" }}
            >
                <List
                    loading={state.loading}
                    grid={{ gutter: 24, xs: 1, sm: 2, md: 4, lg: 4, xl: 5, xxl: 6 }}
                    dataSource={state.members}
                    renderItem={(item) => {
                        let actions = [<a>编辑</a>];
                        if (item.piStatus === false) {
                            if (item.pmUuid !== baseInfo.uuid) {
                                actions.push(
                                    <a key="passed" onClick={() => passedMember(item.pmUuid)}>
                                        通过
                                    </a>
                                );
                                actions.push(
                                    <a key="passed" onClick={() => destroyMember(item.pmUuid)}>
                                        拒绝
                                    </a>
                                );
                            } else {
                                actions.push(
                                    <span key="waiting" style={{ color: "red" }}>
                                        等待核准
                                    </span>
                                );
                                !item.pmIssy &&
                                    actions.push(
                                        <a key="remove" onClick={() => destroyMember(item.pmUuid)}>
                                            移除
                                        </a>
                                    );
                            }
                        } else if (!item.pmIssy) {
                            actions.push(
                                <a key="remove" onClick={() => destroyMember(item.pmUuid)}>
                                    移除
                                </a>
                            );
                        }
                        return (
                            <List.Item key={item.pmUuid}>
                                <Card hoverable actions={actions}>
                                    <Card.Meta
                                        avatar={
                                            <Avatar
                                                shape="square"
                                                src={kuboUrl && item?.pmAvta ? kuboUrl + item.pmAvta : <Jdenticon size="40" value={item?.pmName} />}
                                                size={40}
                                            />
                                        }
                                        title={item?.pmName || ""}
                                        description={item?.pmPhone}
                                    />
                                </Card>
                            </List.Item>
                        );
                    }}
                />
            </SemiCard>
        </div>
    );
};

export default PlatformMembers;
